import React, { useState, useEffect, useLayoutEffect } from 'react';
import { Alert,Button, View, Text, FlatList, Image, Switch, StyleSheet, SafeAreaView, Pressable, ScrollView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
function Setting() {
    const navigation = useNavigation(); // 获取navigation对象
    const createTwoButtonAlert = () =>
        Alert.alert(
          "提示",
          "确定退出登录吗？",
          [
            {
              text: "取消",
              onPress: () => console.log("Cancel Pressed"),
              style: "cancel"
            },
            { text: "确定", onPress: () => loginOut() }
          ]
        );
    const loginOut = () => {
        AsyncStorage.setItem('userInfo', null);
        AsyncStorage.setItem('token', null);
        AsyncStorage.setItem('name',null);
        AsyncStorage.setItem('loginStatus',false);
        navigation.replace('Login');
    };
    return (

        <View style={styles.container}>

            <ScrollView>


                <View style={styles.menuContainer}>
                    {/* //切换方式 */}
                    <MenuItem text="切换方式" extraText="跟随微信" isLastItem={true} />

                </View>
                <View style={styles.menuContainer}>
                    <Pressable onPress={() => navigation.navigate('个人信息')}>
                        <MenuItem text="个人信息" isLastItem={true} />
                    </Pressable>

                </View>
                <View style={styles.menuContainer}>
                    <MenuItem text="个性主题" extraText="朵朵粉" />
                    <MenuItem text="聊天皮肤" isLastItem={true} />
                </View>
                <View style={styles.menuContainer}>
                    <MenuItem text="订阅关键词" />
                    <MenuItem text="屏蔽关键词" isLastItem={true} />
                </View>
                <View style={styles.menuContainer}>
                    <MenuItem text="攒局通知形式" extraText="数字" />
                    <MenuItem text="赞/赞赏通知形式" extraText="红点" />
                    <MenuItem text="收到消息震动" isLastItem={true} switch={true} hintText="开启后在使用小程序时，收到新消息会震动" />
                </View>
                <View style={styles.menuContainer}>
                    <MenuItem text="启动页停留时长" extraText="1s" hintText="提示：展示单词页时按住页面可让页面持续停留" />
                    <MenuItem text="首页下拉刷新音效" switch={true} hintText="开启后首页下拉刷新会有音效" />
                    <MenuItem text="点击消息跳转至该条评论" switch={true} hintText="开启后从消息列表接入帖子页面会滚动到最新未读评论" />
                    <MenuItem text="折叠全部评论" switch={true} hintText="开启后进入帖子页面会自动折叠全部评论" />
                    <MenuItem text="上传视频时进行压缩" switch={true} hintText="开启后选择视频后会进行压缩，如遇到选择视频时出现[视频已损坏]，可尝试打开" />
                    <MenuItem text="仅WIFI下自动播放视频" switch={true} isLastItem={true} hintText="开启后视频仅会在WIFI下自动播放" />
                </View>
                <View style={styles.menuContainer}>
                    <MenuItem text="拉黑列表" isLastItem={true} />
                </View>
                <Pressable onPress={createTwoButtonAlert}>
                    <View style={styles.menuContainer}>
                        <MenuItem text="注销账号" isLastItem={true} />
                    </View>
                </Pressable>

            </ScrollView >

        </View >
    );
}
function MenuItem({ text, hintText, extraText, isLastItem, switch: showSwitch }) {
    const [isEnabled, setIsEnabled] = React.useState(false);
    const toggleSwitch = () => setIsEnabled(previousState => !previousState);

    return (
        <View style={[styles.menuItem, isLastItem && styles.lastItem]}>
            {/* <Text style={styles.menuText}>{text}</Text> */}
            <View style={styles.textContainer}>
                <Text style={styles.menuText}>{text}</Text>

                {hintText && <Text style={styles.hintText}>{hintText}</Text>}
            </View>
            {extraText && <Text style={styles.smallText}>{extraText}</Text>}
            {showSwitch ? (
                <Switch
                    trackColor={{ false: "#767577", true: "#EB7A76" }}
                    thumbColor={isEnabled ? "#fff" : "#f4f3f4"}
                    onValueChange={toggleSwitch}
                    value={isEnabled}
                />
            ) : (
                <Image style={styles.arrowIcon} source={require('../assets/jiantou.jpg')} />
            )}

        </View>
    );
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',//#f0f0f0

    },
    menuContainer: {
        borderWidth: 1,
        borderColor: '#ffffff',
        // borderRadius: 10,
        padding: 8,
        marginVertical: 3,
        backgroundColor: '#ffffff',
        // margin: 10,
        marginTop: 3,
    },
    menuItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#EFEFEF',
    },
    textContainer: {
        flex: 1,
    },
    menuIcon: {
        width: 20,
        height: 20,
        marginRight: 10,
    },
    menuText: {
        flex: 1,
        fontSize: 16,
        fontWeight: 'bold',

    },
    smallText: {
        fontSize: 12, // 小字的字体大小
        color: 'grey', // 小字的颜色
        marginRight: 5, // 小字与箭头的距离
    },
    arrowIcon: {
        width: 16,
        height: 16,
    },
    lastItem: {
        borderBottomWidth: 0, // 移除底部边框
    },
    hintText: {
        fontSize: 12, // 提示文本的字体大小
        color: '#6e6e6e', // 提示文本的颜色
        marginTop: 1, // 提示文本与主文字的上边距
    },

});

export default Setting;
